<template>
  <div class="WorkmanshipData" ref="WorkmanshipData">
    <div class="tab_box">
      <div class="title">产品加工过程信息</div>
      <div class="icons">
        <div class="btns">
          <el-button size="small" type="primary" @click="handlerExport">
            数据导出</el-button
          >
          <el-button size="small" type="primary">
            <i class="el-icon-download"> </i>
            下载</el-button
          >
          <el-button size="small" type="primary">
            <i class="el-icon-printer"></i>
            打印</el-button
          >
        </div>
        <span class="el-icon-full-screen" style="margin-left: 10px"></span>
      </div>
    </div>
    <div class="details3_box" ref="piediv">
      <el-table
        :row-class-name="tableRowClassName"
        :data="tableData"
        style="width: 100%"
        :header-cell-class-name="headerRowStyle"
      >
        <!-- height="100px"
        v-adaptive -->
        <el-table-column prop="date" label="阶段" type="index" width="50">
        </el-table-column>
        <el-table-column prop="temperature" label="设定温度"> </el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="160">
        </el-table-column>
        <el-table-column prop="startTemperature" label="开始温度">
        </el-table-column>
        <el-table-column prop="processTime" label="结束时间" width="160">
        </el-table-column>
        <el-table-column prop="surplusTime" label="结束温度" width="88">
          <!-- <template>
            <Time></Time>
          </template> -->
        </el-table-column>
        <el-table-column prop="endTime" label="运行时间"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
export default {
  components: {},
  data() {
    return {
      options: [
        {
          value: "1",
          label: "零件1",
        },
        {
          value: "零件2",
          label: "零件2",
        },
        {
          value: "零件3",
          label: "零件3",
        },
        {
          value: "零件4",
          label: "零件4",
        },
      ],
      formLabelAlign: {},
      activeName: "first",
      setHeight: 300,
      day: 0,
      hr: 0,
      min: 0,
      sec: 0,
      tableData: [
        {
          startTemperature: "404℃",
          temperature: "500℃",
          val: true,
          startTime: "2020.9.27-14:49:20",
          endTime: "17min",
          surplusTime: "500℃",
          processTime: "2020.9.27-15:06:40",
          timer: null,
        },
        {
          startTemperature: "500℃",
          temperature: "500℃",
          val: true,
          startTime: "2020.9.27-14:06:50",
          endTime: "20min",
          surplusTime: "500℃",
          processTime: "2020.9.27-15:26:51",
          timer: null,
        },
        {
          startTemperature: "500℃",
          temperature: "600℃",
          val: true,
          startTime: "2020.9.27-16:00:50",
          endTime: "34min",
          surplusTime: "600℃",
          processTime: "2020.9.27-15:26:52",
          timer: null,
        },
      ],
    };
  },
  computed: {},
  mounted() {
    // for (let index = 0; index < 9; index++) {
    //   this.tableData.push(_.cloneDeep(this.tableData[0]));
    // }

    this.$nextTick(() => {
      this.setHeight =
        this.$refs.WorkmanshipData.getBoundingClientRect().height - 100;
    });
  },
  methods: {
    handlerExport() {
      this.$emit("handlerExport");
    },
    headerRowStyle() {
      return "success-row";
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    handleClick() {},
  },
};
</script>

<style lang='scss' scoped>
.WorkmanshipData {
  width: 100%;
  border: 1px solid #0da9f2;
  border-top: 0;
  background-color: #081f63;
  /* height: 47%; */
  overflow: hidden;
  /* padding-bottom: 120px; */
  /deep/ .el-dialog {
    background-color: #021750;
    color: #ffffff;
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 100%;
    }
    .el-form-item__label {
      color: #ffffff;
    }
  }
  /* height: 100%; */
  .icon_color {
    color: #5dcbff;
  }
  /deep/ .gutter {
    display: none;
  }
  /deep/ .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /deep/
    .el-table--scrollable-y
    .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  /deep/
    .el-table--scrollable-y
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }

  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }
  .tab_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #010b47;
    /* height: 52px; */
    padding: 10px;
    margin-bottom: 10px;
    .icons {
      display: flex;
      align-items: center;
      .line {
        background-color: #143e94;
        height: 16px;
        width: 1px;
        margin: 0 10px;
      }
    }
    .title {
      font-size: 16px;
    }
  }
  .btns {
    display: flex;
    align-items: center;

    justify-content: flex-end;
    .img_btn {
      width: 12px;
      height: 12px;
      margin-right: 4px;
    }
  }
  /deep/ .el-table {
    background-color: #093085 !important;
    border: 1px solid #0da9f2;
    .has-gutter {
      th {
        padding: 6px 0;
      }
    }
    .el-table__row:hover > td {
      background-color: inherit !important;
    }
    td,
    th.is-leaf {
      border-bottom: 0 !important;
    }
    .el-table__row--striped:hover > td {
      background-color: inherit;
    }
    .warning-row {
      background: #093085 !important;
      color: #fff;
    }
    .success-row {
      background: #002675;
      color: #fff;
    }
  }
  .details3_box {
    padding: 0 15px;
    /* background-color: inherit;
     */
    /* padding: 20px; */
    overflow: auto;
    /* height: 100%; */
    margin-top: 0px;
  }
}
</style>